<template>
  <div class="app-container">
    <div class="data-info">
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                  <p>今日发送采购</p>
                  <el-tooltip effect="dark" content="统计当日累计发送采购计划数量" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </div>
              <div class="text">
                  2
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                  <p>今日累计签收</p>
                  <el-tooltip effect="dark" content="统计当日累计签收数量" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </div>
              <div class="text">
                  2
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                  <p>今日累计确认账单金额</p>
                  <el-tooltip effect="dark" content="统计当日累计确认账单的总金额" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </div>
              <div class="text">
                  ￥78,000.00
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                  <p>本月累计发送采购</p>
                  <el-tooltip effect="dark" content="统计本月累计发送采购计划数量" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </div>
              <div class="text">
                  2
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                  <p>今日累计确认账单金额</p>
                  <el-tooltip effect="dark" content="统计当日累计确认账单的总金额" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </div>
              <div class="text">
                  ￥178,000.00
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :span="11">
          <el-card>
            <!-- 民商信状态分布 -->
            <div class="table">
              <div class="table-title">采购管理（待办事项）</div>
              <div class="table-line"></div>
              <div class="table-content">
                <el-table
                :data="purchasingManagementList"
                style="width: 100%">
                    <el-table-column
                        prop="messageTitle"
                        label="待办项"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="messageName"
                        label="采购计划名称"
                        width="180">
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="toDealWith(scope.row,1)"
                        >去处理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                class="text-center bgfff pd10 flex-shrink-0"
                v-show="queryParams1.total>0"
                :total="queryParams1.total"
                :page.sync="queryParams1.pageNum"
                :limit.sync="queryParams1.pageSize"
                @pagination="getList1"
                />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :span="11">
          <el-card>
            <div class="table">
              <div class="table-title">对账单管理（待办事项）</div>
              <div class="table-line"></div>
              <div class="table-content">
                  <el-table
                    :data="statementManagementList"
                    style="width: 100%">
                        <el-table-column
                            prop="sureBill"
                            label="待办项"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number"
                            label="账单编号"
                            width="180">
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                @click="toDealWith(scope.row,2)"
                            >去处理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    class="text-center bgfff pd10 flex-shrink-0"
                    v-show="queryParams2.total>0"
                    :total="queryParams2.total"
                    :page.sync="queryParams2.pageNum"
                    :limit.sync="queryParams2.pageSize"
                    @pagination="getList2"
                    />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      purchasingManagementList:[
          {
              id:1,
              messageTitle:"采购计划待发送请求1",
              messageName:'XXXX采购计划表1',
          },
          {
              id:2,
              messageTitle:"采购计划待发送请求2",
              messageName:'XXXX采购计划表2',
          },
          {
              id:3,
              messageTitle:"采购计划待发送请求3",
              messageName:'XXXX采购计划表3',
          },
          {
              id:4,
              messageTitle:"采购计划待发送请求4",
              messageName:'XXXX采购计划表4',
          },
          {
              id:5,
              messageTitle:"采购计划待发送请求5",
              messageName:'XXXX采购计划表5',
          },
          {
              id:6,
              messageTitle:"采购计划待发送请求6",
              messageName:'XXXX采购计划表6',
          },
          {
              id:7,
              messageTitle:"采购计划待发送请求7",
              messageName:'XXXX采购计划表7',
          },
          {
              id:8,
              messageTitle:"采购计划待发送请求8",
              messageName:'XXXX采购计划表8',
          },
      ],
      statementManagementList:[
          {
              id:1,
              sureBill:"供应商账单确认1",
              number:'DZ000001',
              type:1,
          },
          {
              id:2,
              sureBill:"采购商账单确认2",
              number:'DZ000002',
              type:2,
          },
          {
              id:3,
              sureBill:"供应商账单确认3",
              number:'DZ000003',
              type:1,
          },
          {
              id:4,
              sureBill:"供应商账单确认4",
              number:'DZ000004',
              type:1,
          },
          {
              id:5,
              sureBill:"供应商账单确认5",
              number:'DZ000005',
              type:1,
          },
          {
              id:6,
              sureBill:"供应商账单确认6",
              number:'DZ000006',
              type:1,
          },
          {
              id:7,
              sureBill:"供应商账单确认7",
              number:'DZ000007',
              type:1,
          },
          {
              id:8,
              sureBill:"供应商账单确认8",
              number:'DZ000008',
              type:1,
          },
      ],
      loading1:false,
      queryParams1: {
        total:8,
        pageNum: 1,
        pageSize: 10,
      },
      loading2:false,
      queryParams2: {
        total:8,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    toDealWith(row,type){
        let path = ''
        let query = {
            id: row.id,
        }
        if(type === 1){
            path = '/purchase-manager/purchase-plan-list';
        }else{
            if(row.type === 1){
                path = '/supplierAccountStatement';
            }else{
                path = '/purchaserAccountStatement';
            }
        }

        this.$router.push({
            path,
            query
        });
        
    },
    getList1(){
        this.loading1 = false;
        this.queryParams1.total = 8;
    },
    getList2(){
        this.loading2 = false;
        this.queryParams2.total = 8;
    }
  },
};
</script>
<style lang="scss" scoped>
.app-container{
    .data-info{
        .chart-item{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            p{
                display: inline-block;
                margin-right: 10px;
                font-size: 24px;
                font-weight: 500;
            }
            i{
                font-size: 24px;
            }
            .text{
                font-size: 28px;
                font-weight: 600;
            }
        }
        .table{
            &-title{
                font-size: 22px;
                font-weight: 600;
            }
            &-line{
                width: 100%;
                height: 1px;
                background-color: #e8e8e8;
                margin-top: 10px;
            }
        }
    }
}
</style>
